/**
 * 组件：Table Row 组件
 * Author:Colin3dmax
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';
import Color from '../constant/color';

class TableRowItem extends Component{

    static propTypes = {
        title:PropTypes.string,
        iconSource:Image.propTypes.source,
        rightTitle:PropTypes.string,
        showSplit:PropTypes.bool,
        showRightArrow:PropTypes.bool,
        onPress:PropTypes.func,
        marginTop:PropTypes.number,
        marginBottom:PropTypes.number,
    }

    static defaultProps = {
        title:'',
        rightTitle:'',
        showSplit:true,
        showRightArrow:true,
        marginTop:0,
        marginBottom:0,
    }

    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount() {

    }


    render() {
        const {title,rightTitle,iconSource,onPress,showSplit,showRightArrow,marginTop,marginBottom} = this.props
        return (
            <View style={[styles.containerOuter,{marginTop:marginTop,marginBottom:marginBottom}]}>
                <TouchableOpacity onPress={onPress}>
                <View style={styles.container}>
                    <View style={styles.leftPanel}>
                        {iconSource && <Image style={styles.imageIcon} source={iconSource}/>}
                        <Text style={styles.title}>{title}</Text>
                    </View>
                    <View style={styles.rightPanel}>
                        <Text style={styles.rightTitle}>{rightTitle}</Text>
                        {showRightArrow && <Image style={styles.imageArrow} source={require('../../spe/yuanwangjiaoyou/images/mine/mine_zizhi_more.png')}/>}
                    </View>
                </View>
                </TouchableOpacity>
                {showSplit && <View style={styles.splitLine}></View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerOuter:{
      backgroundColor:'white',
    },
    container:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        // borderWidth:1,
    },
    leftPanel:{
        paddingLeft:8,
        flexDirection:'row',
        justifyContent:'center',
        flex:1,
    },
    imageIcon:{
        width:40,
        height:40,
        borderRadius:5,
        backgroundColor:'gray',
    },
    rightPanel:{
        padding:10,
        flexDirection:'row',
    },
    topTitlePanel:{
        flexDirection:'row',
        alignItems:'center',
        paddingBottom:10,
    },
    title:{
        fontSize:14,
        flex:1,
    },
    rightTitle:{
        fontSize:12,
        color:'#6F6F6F',
        textAlign:'right',
    },
    subTitle:{
        fontSize:10,
        color:'#6F6F6F',
    },
    splitLine:{
        height:Util.getRealPixel(1),
        flex:1,
        backgroundColor:Color.SPLIT_COLOR,
        marginLeft:8,
    },
    imageArrow:{
        width:9,
        height:15,
        marginLeft:8,
    },
});

export default TableRowItem;